<template>
  <div>
    <el-dialog title="更改数据" :visible.sync="dialogForm2Visible">
      <el-form :model="form2">
        <el-form-item label="型号" :label-width="formLabelWidth">
          <el-input
            v-model="form2.name"
            autocomplete="off"
            style="width: 250px"
          ></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input
            v-model="form2.price"
            autocomplete="off"
            style="width: 100px"
          ></el-input>
        </el-form-item>
        <el-form-item label="出厂日期" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form2.date"
            align="right"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="出厂地址" :label-width="formLabelWidth">
          <el-input v-model="form2.desc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogForm2Visible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="genggai11(), (dialogForm2Visible = false)"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <div style="width: 1400px">
      <table
        border="1"
        cellspacing="0"
        style="
          margin: auto;
          height: 650px;
          width: 90%;
          text-align: center;
          background-color: rgb(215 241 250);
        "
      >
        <thead>
          <tr>
            <th>型号</th>
            <th>出厂日期</th>
            <th>价格</th>
            <th>出厂地址</th>
            <th>操作</th>
          </tr>
          <tr v-for="(item, index) in arr" :key="index">
            <td>{{ item.name }}</td>
            <td>{{ item.requestIdle }}</td>
            <td>{{ item.age }}</td>
            <td>{{ item.dizisanjk }}</td>
            <td>
              <el-button
                type="text"
                @click="genggai(item.id), (dialogForm2Visible = true)"
                >编辑</el-button
              >
              <el-button type="text" @click="open(item.id)">删除</el-button>
            </td>
          </tr>
        </thead>
      </table>
      <div
        style="
          width: 89.9%;
          height: 29px;
          outline: 1px solid #000;
          margin: auto;
          background-color: rgb(215 241 250);
        "
      >
        <fenyeqi
          :arr="arr.length"
          :arr2="arr2.length"
          :hangshu="this.hangshu"
          @shu="ck"
          style="margin-left: 412px"
        ></fenyeqi>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import fenyeqi from "./fenyeqi.vue";
export default {
  components: { fenyeqi },
  data() {
    return {
      currentPage1: 5,
      count: 1,
      arr2: "", //更改的数据
      arr: [], //页面数据
      arr1: [], //总数据
      hangshu: 10,
      shousiozhi: "",
      id: 99,
      dialogForm2Visible: false,
      form2: {
        name: "",
        price: "",
        date: "",
        id: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      value1: "",
      value2: "",
      val: 0,
    };
  },
  created() {
  axios.get('https://7nvr3rh17g.hk.aircode.run/ysd').then((response) => {
    this.arr1 = response.data.result.shop;
    this.arr2 = this.arr1;
    this.arr = this.arr1.slice(0, this.hangshu);
  });
},

  watch: {
    arr1: {
      handler() {
        this.arr = this.arr1.slice(
          this.val * this.hangshu,
          this.val * this.hangshu + this.hangshu
        );
      },
      immediate: true, //一进入页面就执行handler里的代码
      deep: true,
    },
  },
  computed: {},
  methods: {
    open(item) {
      this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.shanchu(item); // 在删除成功时调用shanchu方法
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    ck(val) {
      this.val = val - 1;
      this.arr = this.arr2.slice(
        this.val * this.hangshu,
        this.val * this.hangshu + this.hangshu
      );
    },
    shousio() {
  this.arr2 = this.arr1.result.shop.filter((item) => {
    return item.name.includes(this.shousiozhi);
  });
  this.arr = this.arr2.slice(0, this.hangshu);
},

    shanchu(e) {
      this.arr1 = this.arr1.filter((item) => item.id != e);
      this.arr2 = this.arr1;
      this.arr = this.arr2.slice(
        this.val * this.hangshu,
        this.val * this.hangshu + this.hangshu
      );
    },
    genggai(e) {
      let shu1 = this.arr1.filter((item) => item.id == e)``;
      this.form2.name = shu1[0].name;
      (this.form2.price = shu1[0].price),
        (this.form2.date = shu1[0].date),
        (this.form2.desc = shu1[0].desc),
        (this.form2.id = shu1[0].id);
    },
    genggai11() {
      const date = new Date(this.form2.date);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      this.form2.date = `${year}-${month}-${day}`;
      let index = this.arr1.findIndex((item) => item.id === this.form2.id);
      if (index !== -1) {
        this.arr1.splice(index, 1, {
          name: this.form2.name,
          price: this.form2.price,
          date: this.form2.date,
          desc: this.form2.desc,
          id: this.form2.id,
        });
      }
      this.arr2 = this.arr1;  
    },
  },
};
</script>
<style lang='less' scoped>
// td,
// th {

//  color: #000000;
//   border-bottom: 1px solid #000;
//   border-left: 0;
//   border-right: 0;
// }
.el-pagination button:disabled {
  color: #004fed;
  background-color: #fff;
  cursor: not-allowed;
}
</style>
